import { user } from "../../script/user";
import { Cardmin, BIndType } from "../components/script/card";
import { reactive, ref, toRaw, watch } from "vue";
import { useLogin } from "@/hooks/useLogin";
import { useUser } from "@/stores/user";
const { loginGoogle, loginTwitter } = useLogin();

interface thirdUsersType {
    thirdType: number;
    typeStr: string;
    bound: number
}

watch(() => user.thirdUsers, () => {
    setting.init();
});

const setting = {
    user: reactive(user),
    Jleft: {
        show: ref(false),
        open: function () {
            this.show.value = true;
        },
        close: function () {
            setting.Jleft.show.value = false;
        }
    },
    Jright: {
        cards: ref<Cardmin[]>([new Cardmin(BIndType.GOOGLE, false), new Cardmin(BIndType.TWITTER, false)]),
        ondown: function (item: Cardmin) {
            // console.log('yzt其他平台绑定回调', toRaw(item));
            if (item.label == BIndType.GOOGLE) {
                // return console.log("绑定谷歌");
                loginGoogle();
            }
            else if (item.label == BIndType.TWITTER) {
                // return console.log("绑定推特");
                loginTwitter();
            }
        }
    },
    init: function () {
        this.setIconActive();
    },
    setIconActive() {
        // setTimeout(() => {
        const thirdUsers: thirdUsersType[] = this.user.thirdUsers;
        if (thirdUsers.length > 0) { //循环变量认证了那个平台
            thirdUsers.forEach(item => {
                this.Jright.cards.value.forEach(item_ => {
                    if (String(item.typeStr).toLocaleLowerCase() === String(item_.label).toLocaleLowerCase() && item.bound) {
                        item_.active = true;//是否激活
                    } else {
                        item_.callfn = this.Jright.ondown;//绑定事件
                    }
                });
            });
        } else {
            this.Jright.cards.value.forEach(item => item.callfn = this.Jright.ondown);
        }
        // }, 900);
    }
};
export { setting };